<template>
    <div>
        <el-row :gutter="20" class="mgb20">
            <el-col :span="6">
                <el-card shadow="hover" body-class="card-body">
                    <el-icon class="card-icon bg1">
                        <Calendar />
                    </el-icon>
                    <div class="card-content">
                        <countup class="card-num color1" :end="overviewRes.courseTotal || 0" />
                        <div>总课程数</div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="hover" body-class="card-body">
                    <el-icon class="card-icon bg3">
                        <Clock />
                    </el-icon>
                    <div class="card-content">
                        <countup class="card-num color3" :end="overviewRes.courseUnCompleteTotal || 0" />
                        <div>待完成课程</div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="hover" body-class="card-body">
                    <el-icon class="card-icon bg2">
                        <Finished />
                    </el-icon>
                    <div class="card-content">
                        <countup class="card-num color2" :end="overviewRes.courseCompleteTotal || 0" />
                        <div>已完成课程</div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="hover" body-class="card-body">
                    <el-icon class="card-icon bg4">
                        <User />
                    </el-icon>
                    <div class="card-content">
                        <countup class="card-num color4" :end="overviewRes.trainerTotal || 0" />
                        <div>患者总数</div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        
        <el-card class="box-margin" shadow="hover">
            <el-row>
                <p class="card-header-title" style="margin-bottom: 15px;">今日工作</p>
            </el-row>
        <div class="today-work">
            <div class="today-item">
                <countup class="card-num color1 bottom-level" :end="todayWorkRes.courseTotal || 0" />
                <div>今日课程数</div>
            </div>
            <div class="today-item">
                <countup class="card-num color1 bottom-level" :end="todayWorkRes.courseUnCompleteTotal || 0" />
                <div>待完成课程数</div>
            </div>
            <div class="today-item">
                <countup class="card-num color1 bottom-level" :end="todayWorkRes.courseCompleteTotal || 0" />
                <div>已完成课程数</div>
            </div>
            <div class="today-item">
                <countup class="card-num color1 bottom-level" :end="todayWorkRes.trainerTotal || 0" />
                <div>训练患者总数</div>
            </div>
            <div class="today-item">
                <countup class="card-num color1 bottom-level" :end="todayWorkRes.trainerCompleteTotal || 0" />
                <div>已训练患者数</div>
            </div>
        </div>
        </el-card>

        <el-row :gutter="20" class="mgb20">
            <el-col :span="16">
                <el-card shadow="hover">
                    <div class="card-header">
                        <p class="card-header-title" style="text-align:left;margin-left: -10px;">近七日训练患者情况</p>
                    </div>
                    <v-chart ref="lineChartRef" class="chart" :option="dashOpt1(time,data)" />
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card shadow="hover" :body-style="{ height: '443px' }">
                    <div class="card-header">
                        <p class="card-header-title" style="text-align:left;margin-left: -10px;">训练场景次数排行TOP5</p>
                    </div>
                    <div>
                        <div class="db-title-top">
                            <div class="title-top-font title-top-20 title-top-center">排名</div>
                            <div class="title-top-font title-top-60 title-top-center">场景名称</div>
                            <div class="title-top-font title-top-20 title-top-center">场景数</div>
                        </div>
                        <div class="db-content">
                            <div v-for="(item, index) in sceneTop" :key="index" class="db-content-row">
                                <div class="db-row-number col-number-20 col-number-center">
                                    <span :class="['col-number-top'+(index+1),'col-number-common']">{{ index+1 }}</span>
                                </div>
                                <div class="db-row-name col-number-60 col-number-center" :title="item.scens_name && item.scens_name.length > 18 ? item.scens_name : null">
                                    {{ item.scens_name && item.scens_name.length > 18 ? item.scens_name.slice(0, 18) + '...' : item.scens_name }}
                                </div>
                                <div class="db-row-db col-number-20 col-number-center">{{ item.total }}</div>
                            </div>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts" name="dashboard">
import { ref } from 'vue'
import countup from '@/components/countup.vue';
import { use, registerMap } from 'echarts/core';
import { BarChart, LineChart, PieChart, MapChart } from 'echarts/charts';
import {
    GridComponent,
    TooltipComponent,
    LegendComponent,
    TitleComponent,
    VisualMapComponent,
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import VChart from 'vue-echarts';
import { dashOpt1, dashOpt2, mapOptions } from './chart/options';
import { StatisticService } from '@/api/service/statisticService'

// import chinaMap from '@/utils/china';
use([
    CanvasRenderer,
    BarChart,
    GridComponent,
    LineChart,
    PieChart,
    TooltipComponent,
    LegendComponent,
    TitleComponent,
    VisualMapComponent,
    MapChart,
]);
// registerMap('china', chinaMap);
const lineChartRef = ref();
window.addEventListener('resize', ()=> {
    lineChartRef.value.resize()
})

const overviewRes = ref({});
const totalOverview = async () => {
    const res = await StatisticService.getStatistic()
    overviewRes.value = res
}
totalOverview();

const todayWorkRes = ref({});
const getTodayWorkStatistic = async () => {
    const res = await StatisticService.getTodayWorkStatistic();
    todayWorkRes.value = res
}
getTodayWorkStatistic();

const time = ref([])
const data = ref([])
const getTrainerTotal = async () => {
    const res = await StatisticService.getTrainerTotal();
    time.value = []
    data.value = []
    res.map(item => {
        time.value.push(item.date)
        data.value.push(item.total)
    })
}
getTrainerTotal();

const sceneTop = ref([])
const getSceneTotal = async () => {
    const res = await StatisticService.getScensTotal();
    sceneTop.value = res
    // sceneTop.value.map(item => item.scens_name = '张三')
}
getSceneTotal();

</script>

<style>
.card-body {
    display: flex;
    align-items: center;
    height: 100px;
    padding: 0;
}
</style>
<style scoped>
.card-content {
    flex: 1;
    text-align: center;
    font-size: 14px;
    color: #999;
    padding: 0 20px;
}

.card-num {
    font-size: 30px;
}

.card-icon {
    font-size: 50px;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    color: #fff;
}

.bg1 {
    background: #2d8cf0;
}

.bg2 {
    background: #64d572;
}

.bg3 {
    background: #f25e43;
}

.bg4 {
    background: #e9a745;
}

.color1 {
    color: #2d8cf0;
}

.color2 {
    color: #64d572;
}

.color3 {
    color: #f25e43;
}

.color4 {
    color: #e9a745;
}

.chart {
    width: 100%;
    height: 400px;
}

.card-header {
    padding-left: 10px;
    margin-bottom: 20px;
}

.card-header-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
}

.card-header-desc {
    font-size: 14px;
    color: #999;
}

.timeline-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    color: #000;
}

.timeline-time,
.timeline-desc {
    font-size: 12px;
    color: #787878;
}

.rank-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.rank-item-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f2f2f2;
    text-align: center;
    line-height: 40px;
    margin-right: 10px;
}

.rank-item-content {
    flex: 1;
}

.rank-item-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #343434;
    margin-bottom: 10px;
}

.rank-item-desc {
    font-size: 14px;
    color: #999;
}
.map-chart {
    width: 100%;
    height: 350px;
}

.box-margin {
    margin-bottom: 20px;
}

.today-work {
    display: flex;
    justify-content: space-around;
}

.today-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.bottom-level {
    margin-bottom: 10px;
}

.db-title-top {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 35px;
    line-height: 35px;
    font-size: 14px;
    /* background: rgba(41, 61, 109, 0.5); */

  }
.title-top-font {
    color: #bdbdca;
    /* font-weight: bolder; */
}

.title-top-20 {
    width: 20%;
}

.title-top-60 {
    width: 60%;
}

.title-top-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.db-content {
    width: 100%;
    display: flex;
    flex-direction: column;
}
.db-content-row {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: blue;
    margin-top: 20px;
}
.col-number-common {
    width: 20px;
    height: 20px;
    font-weight: bolder;
    display: flex;
    justify-content: center;
    align-items: center;
}
.col-number-top1 {
    color: white;
    background-color: #a83d07;
    border: 2px solid #ef6018;
}

.col-number-top2 {
    color: white;
    background-color: #877427;
    border: 2px solid #e4c548;
}

.col-number-top3 {
    color: white;
    background-color: #178d89;
    border: 2px solid #23ede7;
}

.col-number-top6,
.col-number-top7,
.col-number-top8,
.col-number-top9,
.col-number-top10,
.col-number-top4,
.col-number-top5 {
    color: #0c5695;
    background-color: #0d2e52;
    border: 2px solid #0c5695;
}
.db-row-name,
.db-row-db,
.db-row-sys {
color: #000;
font-size: 16px;
font-weight: bolder;
}

.col-number-20 {
width: 20%;
}

.col-number-60 {
width: 60%;
}

.col-number-center {
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    text-overflow: ellipsis;
}
</style>
